<template>
  <span :class="getClass">
    <slot></slot>
    <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
  </span>
</template>
<script lang="ts" setup>
import type { PropType } from 'vue';
import { useSlots, computed, onMounted } from 'vue';
import BasicHelp from './BasicHelp.vue';
import { useDesign } from '@/hooks/web/useDesign';

const props = defineProps({
  /**
   * Help text list or string
   * @default: ''
   */
  helpMessage: {
    type: [String, Array] as PropType<string | string[]>,
    default: '',
  },
  /**
   * Whether the color block on the left side of the title
   * @default: false
   */
  span: { type: Boolean },
  /**
   * Whether to default the text, that is, not bold
   * @default: false
   */
  normal: { type: Boolean },
});

const { prefixCls } = useDesign('basic-title');
const slots = useSlots();
const getClass = computed(() => [
  prefixCls,
  { [`${prefixCls}-show-span`]: props.span && slots.default },
  { [`${prefixCls}-normal`]: props.normal },
]);

const createImageUrl = () => {
  const imageUrl = new URL('@/assets/svg/table-icon.svg', import.meta.url).href;
  // 这句话是在element加一个属性，less文件可以通过变量访问属性值
  document.documentElement.style.setProperty('--pseudo-bg-image', `url(${imageUrl})`);
};

onMounted(() => {
  createImageUrl();
});

</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-basic-title';

.@{prefix-cls} {
  display: flex;
  position: relative;
  align-items: center;
  padding-left: 12px;
  color: @text-color-base;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  cursor: pointer;
  user-select: none;

  &::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background-image: var(--pseudo-bg-image);
    // background-image: url('@/assets/svg/table-icon.svg');
    background-size: 100% 100%;
  }

  &-normal {
    font-size: 12px;
    font-weight: 500;
  }

  &-show-span::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 3px;
    height: 16px;
    margin-right: 4px;
    background-color: #939393;
  }

  &-help {
    margin-left: 10px;
  }
}
</style>
